<!DOCTYPE html>
<html>

<head>
    <title>Render函数完整示例</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <anchored-heading :level="3">春天</anchored-heading>
    </div>
    <script>
    var getChildrenTextContent = function(children) {
        return children.map(function(node) {
            return node.children ? getChildrenTextContent(node.children) : node.text
        }).join('')
    }

    Vue.component('anchored-heading', {
        render: function(createElement) {
            var headingId = getChildrenTextContent(this.$slots.default)
                .toLowerCase()
                .replace(/\W+/g, '-')
                .replace(/(^\-|\-$)/g, '')

            return createElement(
                'h' + this.level, [
                    createElement('a', {
                        attrs: {
                            name: headingId,
                            href: '#' + headingId
                        }
                    }, this.$slots.default)
                ])
        },
        props: {
            level: {
                type: Number,
                required: true
            }
        }
    })
    new Vue({
        el: '#app'
    })
    </script>
</body>

</html>
